<template>
    <div>
        <el-container style="height: 100vh;">
            <!-- 头部布局 -->
            <el-header>
                <div class="hrStyle">
                    <img src="../img/HR.jpeg" style="height: 60px;">
                    人力资源管理系统
                </div>
                <div class="button-container">
                    <el-button type="info" @click="logout" round>退出</el-button>
                </div>
            </el-header>
            <!-- 容器布局 -->
            <el-container style="height: 100vh;">
                <!-- 侧边栏布局 -->
                <el-aside width="200px">
                    <el-menu background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="iconfont icon-hryuangongxinxi"></i>
                                <span>信息管理</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="1-1" class="second-menu" @click="Department()">
                                    <template>
                                        <i class="iconfont icon-hrbumen1"></i>
                                        部门管理
                                    </template>
                                </el-menu-item>
                                <el-menu-item index="1-2" class="second-menu" @click="UserGuanLi()">
                                    <i class="iconfont icon-hryuangongguanli1"></i>
                                    员工管理
                                </el-menu-item>
                                <el-menu-item index="1-3" class="second-menu" @click="RoleGuanLi()">
                                    <i class="iconfont icon-hrjiaoseguanli"></i>
                                    角色管理
                                </el-menu-item>
                                <el-menu-item index="1-4" class="second-menu" @click="ResourceGuanLi()">
                                    <i class="iconfont icon-hrziyuan"></i>
                                    资源管理
                                </el-menu-item>
                                <el-menu-item index="1-5" class="second-menu" @click="ImportGuanLi()">
                                    <i class="iconfont icon-hrdaoru1"></i>
                                    导入管理
                                </el-menu-item>
                                <el-menu-item index="1-6" class="second-menu" @click="test()">
                                    <i class="iconfont icon-hrdaoru1"></i>
                                    测试页面
                                </el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                        <el-submenu index="2">
                            <template slot="title">
                                <i class="el-icon-menu"></i>
                                <span slot="title">考勤管理</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="2-1" class="second-menu" @click="BanBie()">
                                    <template>
                                        <i class="iconfont icon-hrbumen1"></i>
                                        班别管理
                                    </template>
                                </el-menu-item>
                                <el-menu-item index="2-2" class="second-menu" @click="XiuXi()">
                                    <template>
                                        <i class="iconfont icon-hrbumen1"></i>
                                        休息管理
                                    </template>
                                </el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                        <el-submenu index="3">
                            <template slot="title">
                                <i class="el-icon-setting"></i>
                                <span slot="title">属性设置</span>
                            </template>
                            <el-submenu index="3-1">
                                <template slot="title">部门属性设置</template>
                                <el-menu-item index="3-1-1" @click="DeptType()">部门类型1</el-menu-item>
                                <el-menu-item index="3-1-2">部门类型2</el-menu-item>
                            </el-submenu>
                            <el-submenu index="3-2">
                                <template slot="title">员工属性设置</template>
                                <el-menu-item index="3-2-1">员工类型1</el-menu-item>
                                <el-menu-item index="3-2-2">员工类型2</el-menu-item>
                            </el-submenu>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <!-- 主体布局 -->
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
export default {
    methods: {
        logout() {
            window.sessionStorage.clear();//清除session
            this.$router.push("/login")//回到登录页
        },
        Department() {
            this.$router.push('/BuMenGuanLi');
        },
        UserGuanLi() {
            this.$router.push('/YuanGongGuanLi');
        },
        RoleGuanLi() {
            this.$router.push('/RoleGuanLi');
        },
        ResourceGuanLi() {
            this.$router.push('/ResourceGuanLi');
        },
        ImportGuanLi() {
            this.$router.push('/ImportGuanLi');
        },
        test() {
            this.$router.push('/test');
        },
        BanBie() {
            this.$router.push('/BanBie');
        },
        XiuXi() {
            this.$router.push('/XiuXi');
        }
        ,
        DeptType() {
            this.$router.push('/DeptType');
        }

    },
}

</script>

<style>
/* 头部样式 */
.el-header {
    background-color: #818a94;
    color: #fff;
    text-align: center;
    line-height: 60px;
    /* 设置与容器高度一致 */
    display: flex;
    justify-content: space-between;
    /*此时会留有空白*/
    align-items: center;
    /*按钮上下居中*/
    font-size: 45px;

    >div {
        /*文本居中*/
        display: flex;
        align-items: center;
    }

    ;
}

/* 侧边栏样式 */
.el-aside {
    background-color: #545c64;
    color: #333;
    text-align: center;
    flex: 0 0 auto;

    .el-menu {
        border-right: none;
    }

    ;
    overflow: hidden;
}

/* 主题样式 */
.el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    flex: 1;
    overflow: hidden;
}

/* 退出样式 */
.hrStyle {
    display: flex;
    justify-content: flex-start;
}

.button-container {
    display: flex;
    justify-content: flex-end;
    height: 60px;
    float: right;
}

.second-menu {
    display: flex;
    justify-content: flex-end;
    float: right;
}
</style>